<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="我的门票" @clickLeft="clickLeft()"></uni-nav-bar>
		<view class="tui-tick-body" v-for="(item, index) in tickList" :key="index">
			<view class="tui-tick-center">
				<view class="tui-flex tui-space-between br-b tui-pd-bottom">
					<view class="tui-tick-toptit">订单号: {{item.orderCode}}</view>
					<view class="tui-tick-toptit">{{item.state | statetype}}</view>
				</view>
				<view class="tui-flex tui-pd br-b">
					<view class="tui-tick-img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="tui-tick-title">
						<view class="tui-title-filled">{{item.title}}</view>
						<view>订票张数: <text class="tui-pd-left color-txt">{{item.sheetsNum}} 张</text> </view>
						<view>游玩日期: <text class="tui-pd-left color-txt">{{item.date}}</text></view>
						<view>入园时间: <text class="tui-pd-left color-txt">{{item.time}}</text></view>
					</view>
				</view>
				<view class="tui-flex tui-space-between tui-pd-top" v-if="item.state != 2">
					<view>实付款: <text style="color: #e64340;font-weight: 600;">￥{{item.pric}}</text></view>
					<view v-if="item.state == 1">
						<button type="warn" size="mini" class="action-btn" @click="deleteTick(index)">删除订单</button>
					</view>
					<view class="tui-flex" v-else>
						<button type="default" size="mini" class="action-btn" >申请退款</button>
						<button type="primary" size="mini" class="action-btn tui-mg-left" @tap="navTo('/pagesA/myticket/admission?id=' + item.id)">二维码检票</button>
					</view>
				</view>
			</view>
		</view>
		<view class="tui-tail">
			<text>没有更多了</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'myticket',
		filters: {
			statetype(val) {
				return {
					'0': '已支付',
					'1': '交易完成',
					'2': '退款成功'
				}[val]
			}
		},
		data() {
			return {
				tickList: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				this.tickList = await this.$api.json('ticketList')
				console.log(this.tickList)
			},
			//	申请退款
			cancelOrder(item) {
				console.log(item)
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(()=>{
					// this.tickList.splice(index, 1);
					item.state == 2
					return
					
					uni.hideLoading();
				}, 600)
			},
			//	删除订单
			deleteTick(index) {
				uni.showLoading({
					title: '请稍后'
				})
				setTimeout(()=>{
					this.tickList.splice(index, 1);
					uni.hideLoading();
				}, 600)
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-tick-body {
		padding-top: $uni-spacing-row-base;
		.tui-tick-center {
			background-color: $uni-bg-color;
			padding: $uni-spacing-col-base;
			.tui-space-between {
				justify-content: space-between;
			}
			.tui-tick-toptit {
				color: $uni-text-color-grey;
			}
			.tui-pd {
				padding: $uni-spacing-col-base 0;
			}
			.tui-tick-img {
				width: 180rpx;
				height: 180rpx;
				border-radius: $uni-border-radius-lg;
				image {
					width: 100%;
					height: 100%;
					border-radius: $uni-border-radius-lg;
				}
			}
			.tui-tick-title {
				padding-left: $uni-spacing-row-base;
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm + 2rpx;
				.tui-title-filled {
					font-size: $uni-font-size-lg;
					color: #000;
					font-weight: 500;
				}
				.color-txt {
					color: $uni-text-color;
				}
			}
		}
		.action-btn {
			font-size: 26rpx;
		}
	}
</style>
